<template>
  <div>
      <div class="div" 
      v-for="btos in buttons" 
      :key="btos.cid"
      @click="$router.push(`/slideshow-1?type=${btos.cp}`)">
        <p class="p1">{{ btos.cp }}</p>
        <div class="div-1">
          <img
            :src="`/img/icons/${btos.type}/${btos.cp}/${btos.small_picture}`"
            class="img"
          /><span class="span">{{ btos.cp }}</span>
          <br />
        </div>
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      buttons: [],
      buttonss: [],
      types: "",
    };
  },
  mounted() {
    this.getButtons();
  },
  //发送请求
  methods: {
    getButtons() {
      const url = "http://127.0.0.1:3000/v1/particularss/particulars";
      this.axios.get(url).then((res) => {
        console.log(res);
        // 请求的数据保存到buttonss中
        this.buttonss = res.data.buttons;
        // 打印点击的菜品(通过上一个网页跳转过来时路由跳转携带的参数)
        console.log(this.$route.query.type);
        //获取参数中的菜品类型
        this.types = this.$route.query.type;

        let types = this.types;
        // 对请求回来的数据进行指定菜品筛选
        this.buttonss.forEach((value) => {
          if (value.type == types) {
            // 筛选之后放到新的数组中,遍历时候遍历这个筛选数据组成的数组
            this.buttons.push(value);
          }
        });
        // if type='丝瓜' buttons.push()
      });
    },
  },
};
</script>

<style scoped>
.p1 {
  margin-top: 10px;
  color: #999;
  margin-left: 10px;
}
.div-1 {
  border: 1px solid #e8e8e8;
  height: 44px;
  margin: 5px;
  display: flex;
  align-items: center;
}
.img {
  width: 75px;
  height: 44px;
}
.span {
  font-size: 14px;
  color: #ec824c;
  margin-left: 5px;
}
</style>